<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Dragon Baby System</title>
		<%@include  file="/commons/head.jsp"%>
		<script src="${ctx}/js/fileupload/jquery.fileupload.js"></script>
		<script src="${ctx}/js/fileupload/jquery.fileupload-ui.js"></script>
		<script type="text/javascript">
		$(document).ready(function (){
		    var initFileUpload = function (suffix) {
		        $('#file_upload').fileUploadUI({
		            namespace: 'file_upload_' + suffix,
		            fileInputFilter: '#file_' + suffix,
		            dropZone: $('#drop_zone_' + suffix),
		            buildDownloadRow: function (file) {
		            	$("#allImg").val($("#allImg").val() + file.id + ",");
		            	$("#imgsDiv").append("<img src='${ctx}/atta/atta!img.do?id=" +  file.id + "' />");
		            }
		        });
		    };
		    initFileUpload(1);

		    $("#addDesc").click(function(){
				$("#desc").append("<div><textarea name='descs' style='width:260px; float:left;' id='descs'></textarea> <textarea name='enDescs' style='width:260px; float:left;' id='descs'></textarea><a style='margin: 15px 0px;' href='#' onClick='javascript:delDesc(this);' title='Remove Desc' class='ui-icon ui-icon-closethick'>Remove Desc</a></div>");
			});

			$("#procolorBtn").click(function(){
				$("#colors").append("<dd><div><input type='text' style='width:100px; float:left;' name='procolor'/><a style='margin: 5px;' href='#' onClick='javascript:delColor(this);' title='Remove Color' class='ui-icon ui-icon-closethick'>Remove Color</a></div></dd>");
			});

			$("#prosizeBtn").click(function(){
				$("#sizes").append("<dd><div><input type='text' style='width:100px; float:left;' name='prosize'/><a style='margin: 5px;' href='#' onClick='javascript:delSize(this);' title='Remove Size' class='ui-icon ui-icon-closethick'>Remove Size</a></div></dd>");
			});
			$( "#tabs" ).tabs({
				//event: "mouseover"
			});
		});
		function delDesc(nod) {
			$(nod).parent().remove();
		}
		function delColor(nod) {
			$(nod).parent().parent().remove();
		}
		function delSize(nod) {
			$(nod).parent().parent().remove();
		}
		</script>
	</head>
	<body>
		<div class="wrapper">
			<%@include file="/commons/header.jsp" %>
			<div class="content">
				<%@include file="/commons/menu.jsp" %>
				<div class="primary">
					<h1>订单管理</h1>
					<div id="tabs">
					<form id="fm" action="product!save.do" method="post">
						<input type="hidden" name="product.id" value="${product.id}"/>
						<input id="allImg" type="hidden" name="images" value="<s:iterator value="product.pics">${id},</s:iterator>"/>
						<div id="tabs-1">
						<fieldset>
							<legend>基本信息</legend>
							<div>
								<s:textfield theme="custom" key="order.ref" required="true" size="9"/>
								<s:textfield theme="custom" key="product.orderDate" required="true" size="9"/>
							</div>
						</fieldset>
						</div>
						<div id="tabs-2">
						<fieldset>
							<legend>
								产品描述：<input type="button" id="addDesc" value="增加描述"/>
							</legend>
							<div style="width:565px;float:left;">
								<dd style="width:270px;float:left;"><b>中文</b></dd><dd style=""><b>英文</b></dd>
							</div>
							<div id="desc">
								<s:iterator value="product.descs">
									<div>
									<textarea name="descs" style="width:260px; float:left;" id="descs">${descs}</textarea>
									<textarea name="enDescs" style="width:260px; float:left;" id="descs">${enDescs}</textarea>
									<a style="margin: 15px;" href="#" onClick="javascript:delDesc(this);" title="Remove Desc" class="ui-icon ui-icon-closethick">Remove Desc</a>
									</div>									
								</s:iterator>
								<div>
								<textarea name="descs" style="width:260px; float:left;" id="descs"></textarea>
								<textarea name="enDescs" style="width:260px; float:left;" id="descs"></textarea>
								<a style="margin: 15px;" href="#" onClick="javascript:delDesc(this);" title="Remove Desc" class="ui-icon ui-icon-closethick">Remove Desc</a>
								</div>
							</div>
						</fieldset>
						</div>
						<div id="tabs-3">
						<fieldset>
							<legend>颜色与尺码</legend>
							<div style="width:565px;float:left;">
								<ui id="colors" style="width:280px;float:left;">
									<dt>颜色<span class="required">*</span><input id="procolorBtn" type="button" value="增加" /></dt>
									<s:iterator value="product.colors">
										<dd><div><input type="text" style="width:100px; float:left;" name="procolor" value="${name}"/><a style="margin: 5px;" href="#" onClick="javascript:delColor(this);" title="Remove Color" class="ui-icon ui-icon-closethick">Remove Color</a></div></dd>
									</s:iterator>
									<dd><div><input type="text" style="width:100px; float:left;" name="procolor"/><a style="margin: 5px;" href="#" onClick="javascript:delColor(this);" title="Remove Color" class="ui-icon ui-icon-closethick">Remove Color</a></div></dd>
								</ui>
								<ui id="sizes" style="width:280px;float:left;">
									<dt>尺码<span class="required">*</span><input id="prosizeBtn" type="button" value="增加" /></dt>
									<s:iterator value="product.sizes">
										<dd><div><input type="text" style="width:100px; float:left;" name="procolor" value="${name}"/><a style="margin: 5px;" href="#" onClick="javascript:delSize(this);" title="Remove Size" class="ui-icon ui-icon-closethick">Remove Size</a></div></dd>
									</s:iterator>
									<dd><div><input type="text" style="width:100px; float:left;" name="prosize"/><a style="margin: 5px;" href="#" onClick="javascript:delSize(this);" title="Remove Size" class="ui-icon ui-icon-closethick">Remove Size</a></div></dd>
								</ui>
							</div>
						</fieldset>
						</div>
					</form>
						<div id="tabs-4">
						<fieldset>
							<legend>附件</legend>
							<form id="file_upload" action="/ghtrade/atta/atta!upload.do" method="post" enctype="multipart/form-data">
							    <div id="drop_zone_1">
							        <input id="file_1" type="file" name="file" multiple />
							    </div>
							    <div id="imgsDiv">
							    	<s:iterator value="product.pics">
							    		<img src='/ghtrade/atta/atta!img.do?id=${id}' />
							    	</s:iterator>
							    </div>
							</form>
						</fieldset>
						</div>
					</div>
					<input style="font-weight: bold; font-size: 1.2em; padding:7px 18px; margin:10px;" type="button" onclick="$('#fm').submit();" value="保存" />
				</div>
			</div>
			<%@include file="/commons/footer.jsp" %>
		</div>
	</body>
</html>
